
<template>
  <div>
    <Modal v-model="modal.settingSupervisorFlag"
           fullscreen
           footer-hide
           title="配置督导">
      <Row>
        <Col span="9">
          <Form :label-width="60" inline>
            <FormItem label="用户名">
              <Input @on-clear="getAllUser" clearable v-model="userMap.username"/>
            </FormItem>
            <FormItem>
              <Button style="position: relative;left: -48px" icon="ios-search" @click="getAllUser" type="success">搜索
              </Button>
            </FormItem>
          </Form>
          <Row>
            <Transfer
                :data="data"
                :target-keys="targetKeys"
                :list-style="{width: '300px',height: '750px'}"
                :render-format="render3"
                @on-change="handleChange3">
            </Transfer>
          </Row>
          <br/>
          <Row>
            <Page :total="userTotal"
                  :page-size="userMap.size"
                  @on-change="UserChangePage"
                  @on-page-size-change="UserChangePageSize"
                  show-sizer
                  show-total
                  show-elevator/>
          </Row>
        </Col>
        <Col span="15">
          <Form :label-width="80" inline>
            <FormItem style="position: relative; left: -80px;">
              <Button v-if="!btnEdit" type="primary" @click="handleSelectAll(true)" icon="ios-build">编辑督导人员</Button>
              <div v-else>
                <Button type="success" style="margin-right: 10px" icon="ios-paper"
                        @click="saveTheBoundUserToCourse">保存
                </Button>
                <Button type="info" style="margin-right: 10px" icon="ios-hand"
                        @click="btnEdit = false,handleSelectAll(false)">取消
                </Button>
              </div>
            </FormItem>
            <FormItem label="关键字">
              <Input @on-clear="getAllBindingCourse" clearable v-model="CourseMap.field"/>
            </FormItem>
            <FormItem label="督导老师">
              <Select v-model="CourseMap.userArray" multiple style="width: 300px">
                <Option v-for="item in bindingUser" :key="item.userId" :value="item.userId">{{ item.name }}</Option>
              </Select>
              <Button icon="ios-search" type="success" style="margin-left:5px" @click="getAllBindingCourse">查询</Button>
            </FormItem>
          </Form>
          <Table :loading="loading"
                 :columns="columns"
                 :data="tableData"
                 ref="selection"
                 border
                 @on-select="onselectval"
                 @on-select-cancel="onselectcancel"
                 @on-select-all="onselectval"
                 @on-select-all-cancel="onselectcancel">
          </Table>
          <br/>
          <Page
              :total="courseTotal"
              :page-size="CourseMap.size"
              @on-change="CourseChangePage"
              @on-page-size-change="CourseChangePageSize"
              show-sizer
              show-total
              show-elevator/>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "settingSupervisor",
  props: {
    modal: {
      settingSupervisorFlag: false,
      taskId: null
    }
  },
  data() {
    return {
      loading: false,
      data: [],
      targetKeys: [],
      userTotal: 10,
      courseTotal: 10,
      userMap: {
        page: 1,
        size: 20,
        username: null
      },
      CourseMap: {
        page: 1,
        size: 10,
        field: null,
        userArray: [],
        taskId: null,
      },
      btnEdit: false,
      tableData: [],
      bindingUser: [],
      selectCourse: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: "index",
          width: 70,
          title: "序号",
          align: "center",
        },
        {
          title: "课程名称",
          align: "center",
          key: "courseName"
        },
        {
          title: "开课院系",
          align: "center",
          key: "collegeName"
        },
        {
          title: "上课教师",
          width: 150,
          align: "center",
          key: "username"
        },
        {
          title: "角色",
          width: 100,
          align: "center",
          key: "codeName"
        },
        {
          title: "重新发布",
          width: 100,
          align: "center",
          render: (h, params) => {
            return <i-switch disabled={false}>
              <span slot="open">是</span>
              <span slot="close">否</span>
            </i-switch>
          },
        },
        {
          title: "督导教师",
          width: 320,
          render: (h, params) => {
            if (params.row.isEdit) {
              return <div>
                <i-select v-model={params.row.userArray} onOn-change={(e) => {
                  this.tableData.find(f => f.id == params.row.id).userArray = e
                }} transfer multiple>
                  }
                  {
                    this.bindingUser.map(m => {
                      return <i-option value={m.userId}>
                        {m.name}
                      </i-option>
                    })
                  }
                </i-select>
              </div>
            } else {
              return <div>
                {
                  this.bindingUser.filter(f => params.row.userArray.includes(f.userId)).map(m => {
                    return <Tag color="primary">{m.name}</Tag>
                  })
                }
              </div>
            }
          }
        },
      ],
    }
  },
  methods: {
    /**
     * 表格分页
     */
    CourseChangePage(val) {
      this.CourseMap.page = val
      this.getAllBindingCourse()
    },
    CourseChangePageSize(val) {
      this.CourseMap.size = val
      if (this.CourseMap.page == 1) {
        this.getAllBindingCourse()
      }
    },
    /**
     * 穿梭框分页
     */
    UserChangePage(val) {
      this.userMap.page = val
      this.getAllUser()
    },
    UserChangePageSize(val) {
      this.userMap.size = val
      if (this.userMap.page == 1) {
        this.getAllUser()
      }
    },
    /**
     * 穿梭进行时
     */
    handleChange3(newTargetKeys) {
      this.setTaskUser(newTargetKeys)
    },
    render3(item) {
      return `<div style="width: 103%; height: 55px;  position: relative;
              bottom: 22px; line-height: 25px; left: -4px;
              border: 1px #e0e0e0 solid; padding: 5px;
              border-radius: 3px;">
              <div style="position: relative;left: 21px;bottom: 4px;">
              <p><strong>教师名：</strong><span>${item.label}<span style=" border-radius: 3px;
              padding:0 3px 0 3px;
              position: relative;
              color: #ff0000;
              font-size: 12px;
              right: 17px;
              float: right;">${item.userGroup}</span></span></p>
              <p><strong>学&emsp;院：</strong><span title="${item.collegeName}">${item.collegeName}</span></p>
              </div></div>`
    },
    /**
     * 获取所有的用户
     */
    getAllUser() {
      this.userMap.taskId = this.modal.taskId;
      this.http.post("/TaskUser/getAllUser", this.qs.parse(this.userMap)).then(res => {
        if (res.data) {
          this.data = res.data.list.map(m => {
            let data = new Object();
            data.key = m.userId
            data.label = m.name;
            data.collegeName = m.collegeDO.name;
            data.userGroup = "";
            m.userGroupsList.forEach(item => {
              data.userGroup += "【" + item + "】"
            })
            return data
          })
          this.userTotal = res.data.total
        }
      })
    },
    /**
     * 设置任务与用户绑定
     * @param val
     */
    setTaskUser(val) {
      let relieveUserIdList = this.bindingUser.map(m => {
        return m.userId
      }).filter(f => !val.includes(f))
      this.http.post("/TaskUser/setTaskUser", this.qs.parse({
        "list": val,
        "relieveUserIdList": relieveUserIdList,
        "taskId": this.modal.taskId
      })).then(res => {
        if (res.data) {
          this.targetKeys = val;
          this.getAllBindingCourse()
          this.getTaskUserByTaskId()
          this.$Message.success({
            background: true,
            content: "操作成功！"
          })
        }
      })
    },
    /**
     * 获取已绑定的用户
     */
    getTaskUserByTaskId() {
      this.http.get(`/TaskUser/getTaskUserByTaskId/${this.modal.taskId}`).then(res => {
        if (res.data) {
          this.targetKeys = res.data.map(m => {
            return m.userId
          })
          this.bindingUser = res.data
        }
      })
    },
    /**
     * 获取绑定的课程
     */
    getAllBindingCourse() {
      this.loading = true
      this.CourseMap.taskId = this.modal.taskId
      this.http.post(`/TaskUser/getAllBindingCourse`, this.qs.parse(this.CourseMap)).then(res => {
        if (res.data) {
          this.tableData = res.data.list.map(m => {
            m.isEdit = false
            m._checked = false
            return m;
          })
        }
      }).finally(f => {
        this.loading = false
      })
    },
    /**
     * 选中的时候
     * @param array
     */
    onselectval(array) {
      this.btnEdit = true
      this.selectCourse = this.tableData.filter(f => array.map(m => {
        return m.id
      }).includes(f.id)).map(t => {
        t.isEdit = true
        t._checked = true
        return t
      })
    },
    /**
     * 取消选中的时候
     * @param array
     */
    onselectcancel(array) {
      this.tableData.forEach(f => {
        f.isEdit = false
        f._checked = false
      })
      this.selectCourse = array.length > 0 ? this.tableData.filter(f => array.map(m => {
        return m.id
      }).includes(f.id)).map(t => {
        t.isEdit = true
        t._checked = true
        return t
      }) : []
    },
    /**
     * 处理全选复选框
     * @param status
     */
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
      if (!status) {
        this.tableData.forEach(f => {
          f.isEdit = false
        })
      }
    },
    saveTheBoundUserToCourse() {
      if (this.selectCourse.length > 0) {
        this.http.post("/TaskUser/saveTheBoundUserToCourse",
            this.qs.parse(this.selectCourse))
            .then(res => {
              this.btnEdit = false
              this.selectCourse.forEach(f => {
                f._checked = false
                f.isEdit = false
              })
              if (res.data) {
                this.$Message.success({
                  background: true,
                  content: "保存成功"
                })
              }
            })
      } else {
        this.$Message.error({
          background: true,
          content: "请正确操作"
        })
      }
    }
  }, watch: {
    'modal.settingSupervisorFlag'(val) {
      if (val) {
        this.getAllUser()
        this.getTaskUserByTaskId()
        this.getAllBindingCourse()
      }
    },
  }
}
</script>

<style lang="less">
.ivu-transfer-list-content-item {
  height: 63px;
  p {
    margin-bottom: 0em;
  }
}

</style>
